<template>
  <view class="header" @click="goplayerall">
    <svg t="1742345901197" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5558" width="30" height="30"><path d="M540.032 70.976c-245.952 0-446.016 200.064-446.016 446.016s200.064 446.016 446.016 446.016 446.016-200.064 446.016-446.016-200.064-446.016-446.016-446.016z m0 828.032c-210.624 0-382.016-171.392-382.016-382.016s171.392-382.016 382.016-382.016 382.016 171.392 382.016 382.016-171.392 382.016-382.016 382.016z" p-id="5559" fill="#C84341"></path><path d="M417.152 643.84c0 35.2 24.96 49.6 55.424 32l219.584-126.784c30.528-17.6 30.528-46.4 0-64L472.576 358.208c-30.528-17.6-55.424-3.2-55.424 32v253.632z" p-id="5560" fill="#C84341"></path></svg>
    <text style="padding-left: 10rpx;font-size: 14px;">播放全部（{{ list.length }}）</text>
  </view>
  <uni-list :border="true" v-for="(item,index) in list">
    <uni-list-item 
    :title="index + 1 +'. '+ item.name" 
    :show-badge="true" :note="(item.ar as SingerItem[]).map(val=>val.name).join(' / ')"  
    link="reLaunch" 
    @click="goplayer(item)"
    :rightText="get.song?.id === item.id? '正在播放':''"
    ></uni-list-item>
  </uni-list>
</template>

<script setup lang="ts">
// 这里编写逻辑代码
import { recommendApi } from '../../services/index'
import { ref } from 'vue'
import type { TrackItem, SingerItem} from '../../services/type'
import { useMusicStore } from '../../store/listMusic'
const list = ref<TrackItem[]>([])
const get = useMusicStore()
recommendApi()
.then(res => {
  list.value = res.data.dailySongs
})
const goplayerall= () =>{
  uni.navigateTo({url:'/pages/player/player'})
 get.songs = list.value
 get.song = get.songs[0]
}
const goplayer = (item:TrackItem) => {
  uni.navigateTo({url:'/pages/player/player'})
  get.songs = list.value
  get.song = item
  // console.log(get.song,get.songs)
}
</script>

<style scoped>
/* 这里编写样式代码 */
.header{
  height: 100rpx;
  display: flex;
  align-items: center;
  padding-left: 20rpx;
}
.uni-list-item ::v-deep .uni-list-item__extra-text {
  color: red;
}
</style>